<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background: red;
        margin-left: 200px;
        margin-top: 50px;
      }
      .container {
        width: 100px;
        height: 2000px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
    <div class="box"></div>

    <script>
      //一、 相对于自身的点击坐标  :鼠标点击的点 距离元素左上角的距离
      // offsetX offsetY : 相对于自身
      //   var boxEle = document.querySelector(".box");
      //   boxEle.onclick = function (event) {
      //     var e = event || window.event;
      //     console.log(e.offsetX);
      //     console.log(e.offsetY);
      //   };

      // 二、点击点 相对于 浏览器的坐标
      // clientX clientY ：相对于浏览器；
      //   var boxEle = document.querySelector(".box");
      //   boxEle.onclick = function (event) {
      //     var e = event || window.event;
      //     console.log(e.clientX);
      //     // console.log(e.clientY);
      //   };

      // 三、点击的点相对于页面的坐标
      // pageX pageY

      var boxEle = document.querySelector(".box");
      boxEle.onclick = function (event) {
        var e = event || window.event;
        console.log(e.pageX);
        console.log(e.pageY);
      };

      // 总结 ： width 、height 、left 、top  ： 元素的尺寸偏移量有关系；
      // x、y 和事件里的坐标有关系；   事件触发的坐标 ；
      // 主体不同；
      // offsetWidth：自身宽度+内边距+boderWidth 、clientWidth：自身宽度+内边距  、offsetLeft:1.没有定位：相对于页面的偏移量2.有定位：相对于父级的偏移量 、clientLeft：border-left的宽度
      // offsetX ：点击的时候相对于自身的左边的距离 、clientX ：相对于浏览器的左边的距离 、pageX ：相对于页面的左边的距离
    </script>
  </body>
</html>
